

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>0.11 Component Tips — Netinfo.Vue.js</title>
    <meta charset="utf-8">
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="alternate" hreflang="x-default" href="https://vuejs.org/2014/12/08/011-component/">
    <link rel="alternate" hreflang="zh" href="https://cn.vuejs.org/2014/12/08/011-component/">
    <link rel="alternate" hreflang="ja" href="https://jp.vuejs.org/2014/12/08/011-component/">
    <link rel="alternate" hreflang="ru" href="https://ru.vuejs.org/2014/12/08/011-component/">
    <link rel="alternate" hreflang="ko" href="https://kr.vuejs.org/2014/12/08/011-component/">
    <link rel="alternate" hreflang="pt-BR" href="https://br.vuejs.org/2014/12/08/011-component/">
    <link rel="alternate" hreflang="fr" href="https://fr.vuejs.org/2014/12/08/011-component/">

    <meta property="og:type" content="article">
    <meta property="og:title" content="0.11 Component Tips — Vue.js">
    <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta property="og:image" content="https://cn.vuejs.org//netinfofe/images/logo.png">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="0.11 Component Tips — Vue.js">
    <meta name="twitter:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="twitter:image" content="https://cn.vuejs.org/images/logo.png">

    <link rel="apple-touch-icon" sizes="57x57" href="/netinfofe/images/icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/netinfofe/images/icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/netinfofe/images/icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/netinfofe/images/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/netinfofe/images/icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/netinfofe/images/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/netinfofe/images/icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/netinfofe/images/icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/netinfofe/images/icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/netinfofe/images/icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/netinfofe/images/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/netinfofe/images/icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/netinfofe/images/icons/favicon-16x16.png">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <link rel="icon" href="/netinfofe/images/logo.png" type="image/png">

    <meta name="msapplication-TileColor" content="#4fc08d">
    <meta name="theme-color" content="#4fc08d">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="/manifest.json">

    <!-- <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'> -->

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- main page styles -->
    <link rel="stylesheet" href="/netinfofe/css/page.css">

    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="/netinfofe/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      Vue.config.productionTip = true
      window.PAGE_TYPE = ""
    </script>

    <!-- ga -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-46852172-3', 'cn.vuejs.org');
      ga('send', 'pageview');
    </script>
  </head>
  <body class="docs">
    <div id="mobile-bar" >
      <a class="menu-button"></a>
      <a class="logo" href="/"></a>
    </div>
    <div id="header">
  <a id="logo" href="/netinfofe/">
    <img src="/netinfofe/images/logo.png" alt="vue logo">
    <span>Netinfo.Vue.js</span>
  </a>
  <ul id="nav">
    <li>
  <!--<form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>-->
</li>
<!--<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
      <li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
      <li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
      <li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
      <li><a href="/netinfofe/v2/cookbook/" class="nav-link">Cookbook</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>
-->

<!--<li class="nav-dropdown-container support-vue">
  <a href="/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>
-->
<!--<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>-->

<li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
<li><a href="/netinfofe/v2/components/" class="nav-link">组件</a></li>
<li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
<li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
<li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
<li><a href="/netinfofe/v2/cookbook/" class="nav-link">Cookbook</a></li>


<li>
  <a href="/netinfofe/v2/aboutus/" class="nav-link team">关于我们</a>
</li>

  </ul>
</div>

    
      <div id="main" class="fix-sidebar">
        
          <div class="sidebar blog">
  <div class="sidebar-inner">
    <ul class="main-menu">
      <li>
  <!--<form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>-->
</li>
<!--<li class="nav-dropdown-container learn">
  <a class="nav-link">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
      <li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
      <li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
      <li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
      <li><a href="/netinfofe/v2/cookbook/" class="nav-link">Cookbook</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
      <li><a href="https://www.vuemeetups.org/" class="nav-link" target="_blank">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/" class="nav-link" target="_blank">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org" class="nav-link" target="_blank">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank">周刊</a></li>
      <li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
    </ul></li>
    <li><h4>资源列表</h4></li>
    <li><ul>
      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
      <li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
    </ul></li>
  </ul>
</li>
-->

<!--<li class="nav-dropdown-container support-vue">
  <a href="/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><ul>
      <li><a href="/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
      <li><a href="/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
      <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" class="nav-link">贴纸</a></li>
      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">T 恤商店</a></li>
    </ul></li>
  </ul>
</li>
-->
<!--<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">English</a></li>
    <li><a href="https://jp.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">日本語</a></li>
    <li><a href="https://ru.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">Русский</a></li>
    <li><a href="https://kr.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">한국어</a></li>
    <li><a href="https://br.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">Português</a></li>
    <li><a href="https://fr.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">Français</a></li>
    <li><a href="https://vi.vuejs.org/2014/12/08/011-component/" class="nav-link" target="_blank">Tiếng Việt</a></li>
  </ul>
</li>
-->
<!--<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>-->

<li><a href="/netinfofe/v2/guide/" class="nav-link">教程</a></li>
<li><a href="/netinfofe/v2/components/" class="nav-link">组件</a></li>
<li><a href="/netinfofe/v2/api/" class="nav-link">API</a></li>
<li><a href="/netinfofe/v2/style-guide/" class="nav-link">风格指南</a></li>
<li><a href="/netinfofe/v2/examples/" class="nav-link">示例</a></li>
<li><a href="/netinfofe/v2/cookbook/" class="nav-link">Cookbook</a></li>


<li>
  <a href="/netinfofe/v2/aboutus/" class="nav-link team">关于我们</a>
</li>

    </ul>
    <div class="list">
      <h2>
        Recent Posts
        <a href="/netinfofe/atom.xml" target="_blank" style="vertical-align: middle; margin-left: 5px;">
          <img src="/netinfofe/images/feed.png" style="width: 15px; height: 15px;">
        </a>
      </h2>
      <ul style="padding: 0;">
      
        <li>
          <a href="/2016/04/27/announcing-2.0/" class="sidebar-link">Announcing Vue.js 2.0</a>
        </li>
      
        <li>
          <a href="/2016/03/14/march-update/" class="sidebar-link">March 2016 Update</a>
        </li>
      
        <li>
          <a href="/2016/02/06/common-gotchas/" class="sidebar-link">Common Beginner Gotchas</a>
        </li>
      
        <li>
          <a href="/2015/12/28/vue-cli/" class="sidebar-link">Announcing vue-cli</a>
        </li>
      
        <li>
          <a href="/2015/10/28/why-no-template-url/" class="sidebar-link">Why Vue.js doesn't support templateURL</a>
        </li>
      
        <li>
          <a href="/2015/10/26/1.0.0-release/" class="sidebar-link">Vue.js 1.0.0 Released</a>
        </li>
      
        <li>
          <a href="/2015/06/11/012-release/" class="sidebar-link">Vue.js 0.12 released!</a>
        </li>
      
        <li>
          <a href="/2014/12/08/011-component/" class="sidebar-link current">0.11 Component Tips</a>
        </li>
      
        <li>
          <a href="/2014/11/09/vue-011-release/" class="sidebar-link">Vue.js 0.11 released!</a>
        </li>
      
        <li>
          <a href="/2014/07/29/vue-next/" class="sidebar-link">Vue.js 0.10.6, and what's next</a>
        </li>
      
      </ul>
    </div>
  </div>
</div>
<div class="content with-sidebar blog post">
  <div id="ad">
  <!--<a href="https://time.geekbang.org/column/intro/81?utm_source=website&utm_medium=vue&utm_campaign=81-onsell&utm_content=201805banner" target="_blank" rel="nofollow">
    <img src="/images/geekbang5.gif" alt="极客时间">
  </a>-->
</div>

  <h1>0.11 Component Tips</h1>
  <h4>Dec 8, 2014</h4>
  <p class="tip">Note: this post contains information for the outdated 0.11 version. Please refer to the <a href="https://github.com/yyx990803/vue/releases" target="_blank" rel="noopener">0.12 release notes</a> for the changes in the API.</p>

<p>The release of 0.11 introduced <a href="https://github.com/yyx990803/vue/blob/master/changes.md" target="_blank" rel="noopener">many changes</a>, but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component.</p>
<a id="more"></a>
<h3 id="Isolated-Scope-and-Data-Passing"><a href="#Isolated-Scope-and-Data-Passing" class="headerlink" title="Isolated Scope and Data Passing"></a>Isolated Scope and Data Passing</h3><p>Starting in 0.11, all child components have isolated scope by default, and the recommended way to control component data access is via <a href="/guide/components.html#Explicit_Data_Passing">Explicit Data Passing</a> using <a href="/api/directives.html#v-with"><code>v-with</code></a> or <a href="/api/options.html#paramAttributes"><code>paramAttributes</code></a>.</p>
<p><code>paramAttributes</code> enables us to write Web Component style templates:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Vue.component(<span class="string">'my-component'</span>, &#123;</span><br><span class="line">  paramAttributes: [<span class="string">'params'</span>],</span><br><span class="line">  compiled: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.params) <span class="comment">// passed from parent</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">my-component</span> <span class="attr">params</span>=<span class="string">"&#123;&#123;params&#125;&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="Where-Does-It-Belong"><a href="#Where-Does-It-Belong" class="headerlink" title="Where Does It Belong?"></a>Where Does It Belong?</h3><p>Previously in 0.10, all directives on a component’s container element are compiled in the child component’s scope. Because it inherited parent scope, this worked in most situations. Starting in 0.11.1, we want to provide a cleaner separation between component scopes. The rule of thumbs is: if something appears in the parent template, it will be compiled in parent scope; if it appears in child template, it will be compiled in child scope. For example:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- parent template --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-component</span>=<span class="string">"child"</span> <span class="attr">v-on</span>=<span class="string">"click:onParentClick"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;parentMessage&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- child template, with replace: true --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-on</span>=<span class="string">"click:onChildClick"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;childMessage&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">content</span>&gt;</span><span class="tag">&lt;/<span class="name">content</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>Everything in the parent template will be compiled in the parent’s scope, including the content that’s going to be inserted into the child component.</p>
<p>The only exception to the rule is <code>v-with</code> (and <code>paramAttributes</code> which compiles down to <code>v-with</code>), which works in both places - so you don’t need to worry about it too much.</p>
<h3 id="Cleaner-Event-Communication"><a href="#Cleaner-Event-Communication" class="headerlink" title="Cleaner Event Communication"></a>Cleaner Event Communication</h3><p>Previously the standard way for a child component to communicate to its parent is via dispatching events. However, with this approach, the event listeners on the parent component are not guaranteed to be listening on the desired child component only. It’s also possible to trigger undesired listeners further up the chain if we do not cancel the event.</p>
<p>The most common use case is for a parent to react to the events from a specific, direct child component. So in 0.11.4, <a href="/api/directives.html#v-events">a new directive <code>v-events</code></a> has been introduced to enable exactly this behavior.</p>
<p>0.11.4 has already been released, go try it out!</p>

</div>

        
      </div>
      <script src="/netinfofe/js/smooth-scroll.min.js"></script>
    

    <!-- main custom script for sidebars, version selects etc. -->
    <script src="/netinfofe/js/css.escape.js"></script>
    <script src="/netinfofe/js/common.js"></script>

    <!-- search -->
    <link href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/netinfofe/css/search.css">
    <script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      // search index defaults to v2
      var match = window.location.pathname.match(/^\/(v\d+)/)
      var version = match ? match[1] : 'v2'
      docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '5638280abff9d207417bb03be05f0b25',
      indexName: 'vuejs_cn2',
      inputSelector: selector,
      algoliaOptions: { facetFilters: ["version:" + version] }
      })
    })
    </script>

    <!-- fastclick -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body)
    }, false)
    </script>
  </body>
</html>
